 <template>
	<view class="content">
		<u-navbar :is-fixed="true" z-index="10000" :border-bottom="false" class='u_navbar'>
			<view class="slot-wrap">
				<view class="search-wrap">
					<!-- <u-search v-model="keyword" placeholder="搜索商品" :show-action="false" height="62"
						@search="searchlocal()"></u-search> -->
				</view>
			</view>
		</u-navbar>
		<u-sticky>
			<view class="section">
				<view class="left"><text>综合推荐</text></view>
				<view class="right" @click="paixuClick2">
					<text>销量最高</text>
					<view class="paixu">
						<view v-if="isPaixu2 == false">
							<image :src="iconurl + '/static/mall/xu1.png'"></image>
							<image :src="iconurl + '/static/mall/xu4.png'"></image>
						</view>
						<view v-else>
							<image :src="iconurl + '/static/mall/xu3.png'"></image>
							<image :src="iconurl + '/static/mall/xu2.png'"></image>
						</view>
					</view>
				</view>
				<view class="right" @click="paixuClick3">
					<text>价格</text>
					<view class="paixu">
						<view v-if="isPaixu3 == false">
							<image :src="iconurl + '/static/mall/xu1.png'"></image>
							<image :src="iconurl + '/static/mall/xu4.png'"></image>
						</view>
						<view v-else>
							<image :src="iconurl + '/static/mall/xu3.png'"></image>
							<image :src="iconurl + '/static/mall/xu2.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="type-fliter u-p-10">
			<view class="goodsWrap" @click.stop="goDetail(item.goods_id)" v-for="(item,index) in defaultList" :key="index">
				<image :src="item.cover_pic" border-radius="8rpx 8rpx 0 0"></u-image>
				<view class="priceWrap">
					<p class="name"> {{ item.title }}</p>
					<view class="bottom">
						<text class="goodsPrice"><span class="rmb">¥</span>{{ item.price }}</text>
					</view>
					<p class="yuan"> 大王币：{{item.integral}}</p>
				</view>
			
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-loadmore :status="morestatus" v-if="defaultList!=''" :load-text="loadText"/>
		<view class="emptya flex-column flex-c-c" v-if="defaultList == ''">
			<!-- <image src="https://pd.pdaxiang.com/upload/static/index/null.png"></image> -->
			<text class="size-32 color-h">暂无数据</text>
		</view>
	</view>
</template>

<script>
	import goodsCard from '@/components/mall/goodsCard'
	export default {
		components: {
			goodsCard
		},
		data() {
			return {
				scrollTop:0,
				loadText: {
					loadmore: '上拉加载更多',
					loading: '正在加载，请喝杯茶',
					nomore: '我是有底线的'
				},
				morestatus:"loadmore",
				keyword:"",
				isPaixu1: false,
				isPaixu2: false,
				isPaixu3: false,
				defaultList: [],
				page: 1,
				cat_id: '',
				new_sort: 1,
				sales_sort: 1,
				price_sort: 1,
				iconurl:this.$configs.urls
			}
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
			 clearTimeout();
			this.page = 1
			this.defaultList = []
			this.getlist()
			
		},
		
		onReachBottom() {
			this.morestatus = "loading"
			this.page++
			this.getlist(2)
		},
		onLoad(e) {
			this.cat_id = e.cat_id
			uni.setNavigationBarTitle({
			    title: e.name
			})
			this.getlist();
		},
		onHide() {
			this.page = 1;
		},
		onShow() {
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop > 10) {
				this.isScrollTop = true
			} else {
				this.isScrollTop = false
			}
		
		},
		methods: {
			searchlocal(){
				this.page = 1;
				this.getlist();
			},
			goDetail(goods_id){
				uni.navigateTo({
					url:"/mallPage/mall/goodsdetail?goods_id=" + goods_id
				})
			},
			//商品详情
			toGoods(box_id) {
				uni.navigateTo({
					url: '/indexCont/pages/index/shopdetail?box_id=' + box_id
				});
			},
			paixuClick1() {
				this.sales_sort = "";
				this.price_sort = "";
				this.isPaixu1 = !this.isPaixu1;
				this.isPaixu2 = false;
				this.isPaixu3 = false;
				if (this.isPaixu1 == true) {
					this.new_sort = 2;
				} else {
					this.new_sort = 1;
				}
				this.getlist();
			},
			paixuClick2() {
				this.new_sort = "";
				this.price_sort = "";
				this.isPaixu2 = !this.isPaixu2;
				this.isPaixu1 = false;
				this.isPaixu3 = false;
			
				if (this.isPaixu2 == true) {
					this.sales_sort = 2;
				} else {
					this.sales_sort = 1;
				}
				this.page = 1
				this.defaultList = []
				this.getlist();
			},
			paixuClick3() {
				this.new_sort = "";
				this.sales_sort = "";
				this.isPaixu3 = !this.isPaixu3;
				this.isPaixu1 = false;
				this.isPaixu2 = false;
				if (this.isPaixu3 == true) {
					this.price_sort = 2;
				} else {
					this.price_sort = 1;
				}
				this.getlist();
			},
			getlist(type) {
				let data = {
					page:this.page,
					cat_id:this.cat_id,
					keyword:this.keyword,
					sales_sort:this.sales_sort,
					price_sort:this.price_sort
				}
				uni.showLoading({
					title:"加载中..."
				})
				this.$Request.get(this.$api.mall.goodsList,data).then(res => {
					uni.hideLoading()
					if(type==2){
						this.defaultList = this.defaultList.concat(res.data.list);
						if(res.data.list==''){
							this.morestatus = "nomore"
						}
					}else{
						this.defaultList = res.data.list;
						this.morestatus = "loadmore"
					}
				});
			},

		},

	}
</script>

<style lang="scss" scope>
	.type-fliter{
		display: flex;
		flex-wrap: wrap;
	}
	.goodsWrap {
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.13);
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		margin: 4rpx;
		margin-left: 8rpx;
		flex-shrink: 0;
		width:48%;
		image{
			width: 100%;
			height: 350rpx;
		}
		.priceWrap {
			padding: 12rpx;
			.yuan{
				// text-decoration:line-through;
				font-size: 20rpx;
				color: #999999;
			}
			.badeg-self {
				font-size: 10px;
				padding: 4rpx 8rpx;
				border-radius: 100rpx;
				display: inline-block;
				color: #fff;
				background-image: linear-gradient(to right, #ffa468, #fa3f3f);
				line-height: 1;
				margin-right: 8rpx;
			}
	
			.bottom {
				display: flex;
				align-items: center;
				line-height: 60rpx;
				.moreAction {
					color: #aeb4bb;
					font-weight: 800;
					font-size: 40rpx;
					letter-spacing: -4px;
					margin-right: 14rpx;
				}
			}
	
			/deep/.goodsPrice {
				font-weight: 600;
				color: #F34A4A;
				font-size: 30rpx;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				// font-family: "pangmen";
				.rmb {
					font-weight: 400;
					font-size: 20rpx;
				}
			}
			
			.tag{
				padding: 2rpx 4rpx;
				margin: 5rpx 5rpx 5rpx 0;
			}
	
			.name {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				line-height: 1.4;
				font-size: 24rpx;
				letter-spacing: 1.75rpx;
				margin: 8rpx 0;
				color: #000;
			}
		}
	
	
	
		.coupon {
			width: 24rpx;
			height: 16rpx;
		}
	}
	page {
		background: #f4f4f4;
	}
	.content {
		min-height: 100vh;
		background: #f8f8f8;
		// padding-top: 100rpx;
		
		
		.u_navbar ::v-deep .u-navbar-fixed{
			background-color: #5ABAFF !important;
			
		}
		
		u-icon ::v-deep .u-icon__icon{
			color: #ffffff !important;
		}
		
		
		
		.demo-warter_cont {
			display: flex;
			flex-wrap: wrap;
			width: 98%;
			margin: 0 auto;
			padding-left: 4rpx;
			box-sizing: border-box;
			.demo-warter {
				width: 344rpx;
				border-radius: 8px;
				margin: 10px 5px 0px 5px;
				background-color: #ffffff;
				// padding: 8px;
				box-shadow: 5px 8px 8px 1px rgba(200, 200, 200, 0.3);
				position: relative;
				padding-bottom: 10rpx;
			}
			.demo-image {
				width: 100%;
				height: 340rpx;
				border-radius: 10px;
			}
	
			.demo-title {
				margin-top: 18rpx;
				margin-left: 20rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
			}
			.demo-title2 {
				margin-top: 6rpx;
				margin-left: 20rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
			}
			.demo-price {
				font-size: 28rpx;
				color: #fe0606;
				margin-top: 10rpx;
				font-weight: bold;
				margin-left: 20rpx;
				padding-bottom: 18rpx;
			}
			.footgoods {
				display: flex;
				flex-wrap: wrap;
				padding-left: 20rpx;
				box-sizing: border-box;
				.foot_left {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #ef4756;
				}
				.foot_right {
					min-width: 140rpx;
					height: 44rpx;
					display: flex;
					text-align: center;
					line-height: 44rpx;
					padding: 0 10rpx 0 10rpx;
					margin-left: 4rpx;
					box-sizing: border-box;
					text {
						font-size: 26rpx;
						font-family: PingFang SC;
						color: #999999;
					}
				}
			}
		}
		.section {
			width: 750rpx;
			display: flex;
			justify-content: space-around;
			margin: 0 auto;
			background: #FFFFFF;
			.left {
				width: 36%;
				height: 68rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #282828;
				// border: 2rpx solid #dddddd;
			}
			.right {
				width: 30%;
				height: 68rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border: 2rpx solid #dddddd;
				.paixu {
					view {
						display: flex;
						flex-direction: column;
						padding: 10rpx;
						image {
							width: 12rpx;
							height: 10rpx;
							margin-top: 6rpx;
						}
					}
				}
			}
		}
	}
	
</style>
